<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="bookName">
    <option>请选择</option>
    <option value="三国">三国演义</option>
    <option value="水浒">水浒传</option>
    <option value="西游">西游记</option>
    <option value="红楼">红楼梦</option>
</select>

<select id="roleName">
    <option>请选择</option>
</select>
<select id="story">
    <option>请选择</option>
</select>

<script>
    var bookName = document.getElementById("bookName");
    var roleName = document.getElementById("roleName");
    var story = document.getElementById("story");

    var 三国Roles = ['刘备', '曹操'];
    var 水浒Roles = ['林冲', '武大'];
    var 西游Roles = ['孙悟空', '六耳猕猴'];
    var 红楼Roles = ['贾宝玉', '刘姥姥'];

    var 刘备Story = ['三顾茅庐', '桃园结义'];
    var 曹操Story = ['曹操骂张飞', '火烧赤壁'];
    var 林冲Story = ['豹子头误入白虎堂', '风雪山神庙'];
    var 武大Story = ['血溅鸳鸯楼', '烧饼'];
    var 孙悟空Story = ['大闹天宫', '三打白骨精'];
    var 六耳Story = ['真假美猴王上', '真假美猴王下'];
    var 贾宝玉Story = ['初试云雨情', '梦游太虚境'];
    var 刘姥姥Story = ['大观园上', '大观园下'];

    // 改变事件
    bookName.onchange = function () {
        roleName.innerHTML = "<option>请选择</option>";
        story.innerHTML = "<option>请选择</option>";
        if (this.value == '三国') {
            chooseRole(三国Roles);
        } else if (this.value == '水浒') {
            chooseRole(水浒Roles);
        } else if (this.value == '西游') {
            chooseRole(西游Roles);
        } else if (this.value == '红楼') {
            chooseRole(红楼Roles);
        }
    };
    function chooseRole(roles) {
        for (var i = 0; i < roles.length; i++) {
            var role = roles[i];
            var option = document.createElement("option");
            option.value = role;
            option.innerHTML = role;
            // 拼接子标签
            roleName.appendChild(option);
        }
    }
    roleName.onchange = function () {
        story.innerHTML = "<option>请选择</option>";
        switch (this.value) {
            case "刘备":
                chooseStory(刘备Story);
                break;
            case "曹操":
                chooseStory(曹操Story);
                break;
            case "林冲":
                chooseStory(林冲Story);
                break;
            case "武大":
                chooseStory(武大Story);
                break;
            case "孙悟空":
                chooseStory(孙悟空Story);
                break;
            case "六耳猕猴":
                chooseStory(六耳Story);
                break;
            case "贾宝玉":
                chooseStory(贾宝玉Story);
                break;
            case "刘姥姥":
                chooseStory(刘姥姥Story);
                break;
        }
    };
    function chooseStory(storys) {
        for (var i = 0; i < storys.length; i++) {
            var story = storys[i];
            var option = document.createElement("option");
            option.innerHTML = story;
            // 拼接子标签
            this.story.appendChild(option);
        }
    }

</script>

</body>
</html>